<template>
  <div>
    <el-card>
      <p>实名信息</p>
      <p style="text-align: center">
        完成实名认证后才能添加就诊人，正常进行挂号，为了不影响后续步骤，建议提前实名认证。
      </p>
      <div v-if="infoobj.authStatus == 0">
        <el-form :model="form" label-width="120px">
          <el-form-item label="用户姓名">
            <el-input v-model="form.name" />
          </el-form-item>
          <el-form-item label="证件类型">
            <el-select
              v-model="form.certificatesType"
              style="width: 100%"
              placeholder="请选择"
            >
              <el-option label="身份证" value="10"></el-option>
              <el-option label="户口本" value="20"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="身份证号">
            <el-input v-model="form.certificatesNo" />
          </el-form-item>
          <el-form-item label="证件照">
            <el-upload
              class="avatar-uploader"
              action="http://syt.atguigu.cn/api/oss/file/fileUpload?fileHost=userAuah"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="form.imageUrl" :src="form.imageUrl" class="avatar" />
              <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
            </el-upload>
          </el-form-item>
           <el-form-item>
      <el-button type="primary" @click="onSubmit">确定</el-button>
      <el-button @click="qx">重写</el-button>
    </el-form-item>
        </el-form>
      </div>
      <div v-else>
           <el-descriptions  :column="1" border>
    <el-descriptions-item
      label="用户姓名"
      label-align="right"
      align="left"
      label-class-name="my-label"
      class-name="my-content"
      width="50px"
      >{{infoobj.name}}</el-descriptions-item
    >
    <el-descriptions-item label="证件类型"  width="50px" label-align="right" align="left"
      > <span v-if="infoobj.certificatesType == 10">身份证</span> <span v-if="infoobj.certificatesType == 20">户口本</span> </el-descriptions-item
    >
    <el-descriptions-item label="证件号"  width="50px" label-align="right" align="left"
      >{{infoobj.certificatesNo}}</el-descriptions-item
    >
  
  </el-descriptions>
      </div>
    </el-card>
  </div>
</template>
<script setup>
import { Plus } from '@element-plus/icons-vue'

import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import instance from "../assets/axios";
const infoobj = ref({});
const router = useRouter();
const form = ref({});
const imageUrl = ref("");
const beforeAvatarUpload = () => {};
const handleAvatarSuccess = (e) => {
  console.log(e);
  form.value.imageUrl=e.data
};
const getinfo = async () => {
  const res = await instance.get("/api/user/auth/getUserInfo");
  console.log(res);
  infoobj.value = res.data;
};
const onSubmit=async()=>{
const res=await instance.post("/api/user/auth/userAuah",form.value);
console.log(res)
    window.localStorage.setItem("name", form.value.name);
getinfo()
router.go(0)
}
const qx=()=>{
    form.value={}
}
onMounted(() => {
  getinfo();

});
</script>

<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>